<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>demo4</title>
		<script src="./lib/vue-2.4.0.js"></script>	
		<style>
			.inner{
				height: 150px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 阻止冒泡 -->
			<!-- <div class="inner" @click="div1Handler">
				<input type="button" value="戳他" @click.stop="bthHandler"/>
			</div> -->
			
			<!-- 组织跳转但是依旧事件生效 -->
			<!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题先百度</a> -->
			
			<!-- 让事件从外到里冒泡 -->
			<!-- <div class="inner" @click.capture="div1Handler">
				<input type="button" value="戳他" @click="bthHandler"/>
			</div> -->
			
			<!-- 点击自己才有事件 不被冒泡影响 -->
			<!-- <div class="inner" @click.self="div1Handler">
				<input type="button" value="戳他" @click="bthHandler"/>
			</div> -->
			
			<!-- 只触发一次事件 -->
			<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题先百度</a>
			
		</div>
		
		<script>
			var vm = new Vue ({
				el: '#app',
				data: {
					
				},
				methods: {
					div1Handler() {
						console.log("触发div")
					},
					bthHandler() {
						console.log("触发bth")
					},
					linkClick() {
						console.log('触发链接')
					}
				}
			})
		</script>
	</body>
</html>